<template>
   <div id='tree' ref='tree' style="background-color: background-color:gainsboro;;"></div>
 </template>

 <script>

   import FamilyTree from '@balkangraph/familytree.js'

   export default {
     name: 'tree',
     data() {
       return {
         nodes: [
           { id: 1, pids: [2], name: '安娜', gender: 'female', img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201903%2F15%2F20190315095208_fi2Xc.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691131504&t=c042cf7a9d998ebaa9613cdcafa3e82b'},
           { id: 2, pids: [1],  name: '伊皮凡', gender: 'male', img: 'https://img0.baidu.com/it/u=3893554326,3588755723&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400' },
           { id: 3, mid: 1, fid: 2, pids:[4], name: '瓦伦蒂娜', gender: 'female', img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F24%2F20200324095357_5eam5.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691131869&t=bc072d329389ac96930f02b0171e7ca9' },
            { id: 4, pids: [3], name: '瓦西里', gender: 'male', img: 'https://img1.baidu.com/it/u=3395767652,2898213797&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=350' },
            { id: 5, fid: 4,mid:3, name: '伊万', gender: 'male', img: 'https://img0.baidu.com/it/u=686567862,3251043550&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400' },
            { id: 7, fid: 2,mid:1, name: '娜塔莉亚', gender: 'male', img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F24%2F20200324095357_5eam5.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691132071&t=fe88faab11f6808a79dbadf39347027d' },
         ]
       }
     },
     methods: {
       mytree: function (domEl, x) {
         this.family = new FamilyTree(domEl, {
           nodes: x,
           nodeBinding: {
             field_0: 'name',
             img_0: 'img',
             sp_0: '生平'
           },
           nodeTreeMenu: true
         })
       }
     },
     mounted() {
       this.mytree(this.$refs.tree, this.nodes)
     }
   }
 </script>

 <style scoped>
 </style>
 <style scoped>
   .window {
     width: 100%;
     height: 100vh;
   }
 </style>